<template>
	<view style="width: 100%;height: 100vh;color: white;" class="flex_column">
		<!-- 首页 -->
		<!-- <page-head></page-head> -->
		<view style="padding: 5vh 3vh 2vh 3vh;flex:1;">
			<view style=" height: 100%;" class="flex_col">
				<view class="allCenter rem04">
				    高级设置
				</view>
				<view class="set-con " style="flex:1;">
					<view class="set-cont rem04" style="flex:1">
						<view class="alignCenter" style="padding-top: 5vh;width: 100vh;">
							<view class="set-cont-title">IP地址</view>
							<view class="input-con" style="width: 12vh;margin-right: 2.5vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" v-model="data.ip1" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="dian" />
							<view class="input-con" style="width: 12vh;margin-right: 2.5vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" v-model="data.ip2" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="dian" />
							<view class="input-con" style="width: 12vh;margin-right: 2.5vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" v-model="data.ip3" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="dian" />
							<view class="input-con" style="width: 12vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" v-model="data.ip4" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
						</view>
                        <view class="alignCenter" style="width: 100vh;padding-top: 5vh;">
							<view class="set-cont-title">编码参数</view>
							<view class="input-con" style="width: 18vh;margin-right: 3.5vh;height: 8vh;">
								<input class="rem03" style="padding-left:1vh;" v-model="data.jgCode" placeholder="机构编码" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="input-con" style="width: 26vh;margin-right: 3.5vh;height: 8vh;">
								<input class="rem03" style="padding-left:1vh;" v-model="data.sbCode"  placeholder="设备编码" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="input-con" style="width: 15vh;height: 8vh;">
								<input class="rem03" style="padding-left:1vh;" v-model="data.ypCode" placeholder="音频码" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
						</view>
						<view class="alignCenter" style="padding: 5vh 0;width: 100vh;">
							<view class="set-cont-title">图像参数</view>
							<view class="input-con" style="width: 31vh;margin-right: 5.7vh;height: 8vh;">
								<input class="rem03" style="padding-left:1vh;"  v-model="data.imgVal" placeholder="图像阈值" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							
						</view>
						
					</view>
					<view class="set-btn-con">
                        <view style="padding: 0 3vh;">
                            <button  style="background: #646B97;border-radius: 1.5vh;" type="primary" @click="navigateTo('/pages/choseType/choseType')">
                            <view style="padding: 0.5vh;">产品选型</view>	
                            </button>
                        </view>
						<view style="padding: 0 3vh;">
                        <button style="background: #646B97;border-radius: 1.5vh;" type="primary" @click="reset_click">
                        	<view style="padding: 0.5vh;">重置设置</view>    
                        </button>
                        </view>
                        <view style="padding: 0 3vh;">
                            <button style="background: #646B97;border-radius: 1.5vh;" type="primary" @click="back_click">
                            	<view style="padding: 0.5vh;">取消</view>   
                            </button>
                        </view>
                        <view style="padding: 0 3vh;">
                            <button style="background: #44CE7B;border-radius: 1.5vh;" @click="submit_click">
                            	<view style="padding: 0.5vh 2vh;">保存</view>
                            </button>
                        </view>
					</view>
				</view>

			</view>

		</view>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				btnArr:["YL-8系","YL-6系","YL-4系"],
				typeTxt:"",
        open:true,
        data:{
          ip1:'',
          ip2:'',
          ip3:'',
          ip4:'',
          jgCode:'',
          sbCode:'',
          ypCode:'',
          imgVal:'110',
        },
				defalut:{
				    ip1:'',
				    ip2:'',
				    ip3:'',
				    ip4:'',
				    jgCode:'',
				    sbCode:'',
				    ypCode:'',
				    imgVal:'110',
				}
			}
		},
		onShow: function() {
			this.typeTxt = this.btnArr[getApp().globalData.type];
			// console.log(getApp().globalData.type)
		},
    mounted() {
		  const that=this
      uni.getStorage({
        key: 'set_high_data',
        success: function (res) {
          console.log(res.data);
          that.data=res.data.data
        }
      });
		},
    methods: {
			navigateTo(url){
			    uni.navigateTo({
			    	url: url
			    })
			},
			back_click() {
				uni.navigateBack({
					delta: 2
				})
			},
            reset_click(){
                this.data=JSON.parse(JSON.stringify(this.defalut))
            },
            submit_click(){
                if(!this.data.ip1||!this.data.ip2||!this.data.ip3||!this.data.ip4||!this.data.sbCode||!this.data.jgCode||!this.data.ypCode||!this.data.imgVal){
                    return uni.showToast({
                        title:'全部为必填',
                        icon:'error'
                    })
                }
                //本地先保存这个数据
              uni.setStorage({
                key:'set_high_data',
                data:{
                  data:this.data
                }
              })
              uni.showToast({
                title:'保存成功',
                icon:'success'
              })
            }
		}
	}
</script>

<style>
	page {
		background: #1E2238;
	}

	.set-con {
		opacity: 0.98;
		/* background: #3E4469; */
        background: #4A5079;
		border-radius: 2vh;
		margin-top: 5vh;
		display: flex;
		flex-direction: column;
		margin-bottom: 10vh;
	}

	.set-cont {
		background: #4A5079;
		border-radius: 2vh 2vh 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
        padding-right: 10vh;
	}

	.set-cont-title {
		padding-right: 3vh;
		width:20vh;
		text-align: right;
	}

	.input-con {
		background: #646B97;
		border-radius: 2vh;
		height: 30px;
		display: flex;
		align-items: center;
		padding:0 0.2rem;
	}
    .open-con{
        background: #000;
        border-radius: 2vh;
        height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.08rem ;
    }
    .open-btn{
        background: #646B97;
        border-radius: 2vh;
        height: 7.5vh;
        width: 15vh;
        flex: 1;
        justify-content: center;
        display: flex;
        align-items: center;
    }
	.dian {
		width: 0.15rem;
		height: 0.15rem;
		background: #fff;
		border-radius: 0.1rem;
		margin-right: 2.5vh;
	}

	.set-btn-con {
		padding: 3vh 10vh;
		display: flex;
		justify-content: center;
        border-top: 1px solid #3E4469;
	}
    .input::-webkit-input-placeholder {
         font-size: 3vh;
     }
</style>
